<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="所属区域" prop="areaId">
          <el-cascader
            :props="props"
            :options="treeData"
            :show-all-levels="false"
            expand-trigger="hover"
            style="width: 100px;"
            v-model="queryForm.areaId"
            change-on-select
          ></el-cascader>
        </el-form-item>

        <el-form-item label="关键字" prop="type">
          <el-select v-model="queryForm.type" placeholder="请选择关键字" style="width: 100px;">
            <el-option label="全部" value="1" />
            <el-option label="客户编号" value="2" />
            <el-option label="客户名称" value="3" />
            <el-option label="手机号码" value="4" />
            <el-option label="身份证号" value="5" />
          </el-select>
        </el-form-item>

        <el-form-item label prop="searchVal">
          <el-input v-model="queryForm.searchVal" placeholder="请输入" style="width: 200px;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="50" :default-percent="50" split="vertical">
      <template slot="paneL">
        <d2-crud
          class="cursorTable"
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          @current-change="handleCurrentChange">
        </d2-crud>
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          style="height: 30%"
          :columns="columnsRight"
          @current-change="handleCurrentChangeRight"
          :data="dataRight"
          :loading="loadingRiht">
        </d2-crud>
        <d2-crud
          ref="d2Crud"
          style="height: 50%"
          :columns="columnsRightBottom"
          :pagination="paginationRightBottom"
          :data="dataRightBottom"
          :rowHandle="rowHandle"
          @customXQ="getRechargePage"
          @customJF="handleRowJF"
          :loading="loadingRiht">
        </d2-crud>
<!--        @row-remove="handleRowXh"-->
      </template>
    </split-pane>
    <el-dialog :visible.sync="rechargeBill" v-if="rechargeBill" title="缴费窗口">
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        缴费单号：
        <el-input
          placeholder="请输入内容"
          :disabled="true"
          v-model="recharge.payNumber"
          style="width: 200px">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        缴费金额：
        <el-input
          v-model="recharge.payMoney"
          placeholder="请输入内容"
          :disabled="true"
          style="width: 200px">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        缴费日期：
        <el-input
          placeholder="请输入内容"
          v-model="recharge.billDay"
          :disabled="true"
          style="width: 200px">
        </el-input>
      </div>
      <div class="demo-input-suffix" style="width: 50%;display: inline-block;margin-bottom: 10px;">
        支付方式：
        <el-select v-model="payKey" placeholder="请选择" style="width: 220px;">
          <el-option
            v-for="(item, index) in recharge.payChannelList"
            :key="index"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </div>
      <div class="btn-box" style="width: 92%; text-align: right; padding-right: 20px">
        <el-button @click="rechargeSure" type="primary">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="rechargeListShow" v-if="rechargeListShow" title="充值记录">
      <d2-crud
        ref="d2Crud"
        :columns="rechargeColumns"
        :data="rechargeData"
        :loading="loading"
        :pagination="paginationRecharge"
        @pagination-current-change="paginationRechargeCurrentChange">
      </d2-crud>
    </el-dialog>
  </d2-container>
</template>

<script>
import util from '@/libs/util'

export default {
  name: 'customer',
  data () {
    return {
      householdId: null,
      billId: null,
      rechargeBill: false, // 缴费弹框
      rechargeListShow: false, // 充值记录弹框
      areaArchiveId: null,
      selectedRow: null,
      recharge: null, // 缴费信息
      payKey: 2, // 支付方式
      time: null,
      labelPosition: 'right',
      loading: false,
      loadingRiht: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      paginationRecharge: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      paginationRightBottom: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      queryForm: {
        areaId: [],
        type: '1',
        searchVal: ''
      },
      searchForm: {
        id: '',
        areaName: '',
        customerFee: '',
        customerName: '',
        customerPhone: '',
        customerTel: '',
        receNumber: '',
        fee: 0,
        balance: 0
      },
      rechargeColumns: [
        {
          title: '序号',
          key: 'serialNum',
          width: 50
        },
        {
          title: '充值编号',
          key: 'rechargeNumber',
          sortable: true
        },
        {
          title: '充值渠道',
          key: 'rechargeChannelName',
          sortable: true
        },
        {
          title: '充值金额',
          key: 'rechargeMoney',
          sortable: true
        },
        {
          title: '充值时间',
          key: 'createDate',
          sortable: true
        }
      ],
      rechargeData: [],
      columns: [
        {
          title: '序号',
          key: 'serialNum',
          width: 50
        },
        {
          title: '客户编号',
          key: 'customerSerialnumber',
          sortable: true
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '手机号码',
          key: 'customerPhone',
          sortable: true
        },
        {
          title: '客户地址',
          key: 'areaName',
          sortable: true
        }
      ],
      columnsRight: [
        {
          title: '户号',
          key: 'householdSerialnumber',
          sortable: true
        },
        {
          title: '地址',
          key: 'householdAddress',
          sortable: true
        },
        {
          title: '表计地址',
          key: 'serialnumber',
          sortable: true
        },
        {
          title: '账户余额',
          key: 'householdFee',
          sortable: true
        }
      ],
      columnsRightBottom: [
        {
          title: '出账日',
          key: 'billDay',
          sortable: true
        },
        {
          title: '用量',
          key: 'dosage',
          sortable: true
        },
        {
          title: '计费价格',
          key: 'price',
          sortable: true
        },
        {
          title: '缴费状态',
          key: 'billStatus',
          component: {
            render: (h, row, node, index) => {
              if (row.billStatus === 0) {
                return <span>未交费</span>
              } else if (row.billStatus === 1) {
                return <span>已缴费</span>
              } else if (row.billStatus === 2) {
                return <span>订单异常</span>
              } else {
                return <span>已取消</span>
              }
            }
          },
          sortable: true
        }
      ],
      data: [],
      dataRight: [],
      dataRightBottom: [],
      treeData: [],
      props: {
        children: 'children',
        label: 'name',
        disabled: 'disabled',
        value: 'id'
      },
      values: [],
      selectParams: {
        size: 'mini'
      },
      rowHandle: {
        columnHeader: '操作',
        custom: [
          {
            text: '详情',
            // show: true,
            type: 'primary',
            show: function (index, row) {
              if (row.billStatus !== 0) {
                return true
              } else {
                return false
              }
            },
            size: 'mini',
            emit: 'customXQ',
            float: 'right'
          },
          {
            text: '缴费',
            // show: true,
            type: 'primary',
            show: function (index, row) {
              if (row.billStatus === 0) {
                return true
              } else {
                return false
              }
            },
            size: 'mini',
            emit: 'customJF',
            float: 'right'
          }
        ]
      },
      treeParams: {
        'default-expand-all': true,
        data: [],
        props: {
          children: 'children',
          label: 'name',
          disabled: 'disabled',
          value: 'id'
        }
      }
    }
  },
  mounted () {
    this.fetchData()
    this.initTree()
  },
  methods: {
    // 点击缴费
    handleRowJF (row) {
      this.selectedRow = row.row
      this.getRechargeBill(row.row.id)
    },
    // 获取缴费单号
    getRechargeBill (id) {
      this.$api
        .admin_bill_getChargeBill({
          billId: id
        })
        .then(res => {
          console.log(res)
          // this.time = `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()} ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`
          this.recharge = res
          this.rechargeBill = true
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          // this.loading = false
        })
    },

    // 保存缴费
    rechargeSure () {
      this.$api
        .admin_bill_saveChargeBill({
          billId: this.selectedRow.id,
          payChannel: this.payKey,
          payMoney: this.recharge.payMoney,
          payNumber: this.recharge.payNumber
        })
        .then(res => {
          this.rechargeBill = false
          this.$message.success('缴费成功')
          this.getHouseHoldBillPage(this.householdId)
          console.log(res)
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 获取充值记录
    getRechargePage (row) {
      this.billId = row.row.id
      this.rechargeListShow = true
      this.$api
        .admin_customerFee_getRechargePage({
          householdId: this.householdId,
          billId: this.billId,
          chargeType: 0
        })
        .then(res => {
          this.rechargeData = res.data
          this.paginationRecharge.total = res.total
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 保存缴费
    handleSaveData () {
      this.$api
        .admin_customerFee_refund({
          fee: this.searchForm.fee,
          id: this.searchForm.id,
          receNumber: this.searchForm.receNumber
        })
        .then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getCustomerFeeData(this.searchForm.id)
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {})
    },
    // 修改余额
    changeBalance (value) {
      this.searchForm.balance =
          this.searchForm.customerFee + this.searchForm.fee
    },
    // 获取户号列表
    getCustomerFeeData (rowId) {
      this.loadingRiht = true
      this.dataRightBottom = []
      this.$api
        .admin_customerFee_getHouseHoldList({
          areaArchiveId: rowId
        })
        .then(res => {
          console.log(res)
          this.loadingRiht = false
          this.dataRight = res
        })
        .catch(err => {
          this.loadingRiht = false
          console.log('err', err)
        })
        .finally(() => {})
    },
    // 右侧table单选row
    handleCurrentChangeRight (currentRow) {
      this.getHouseHoldBillPage(currentRow.id)
    },
    // 单选row
    handleCurrentChange (currentRow, oldCurrentRow) {
      this.getCustomerFeeData(currentRow.id)
    },
    // 获取树
    initTree () {
      this.$api
        .admin_area_getList()
        .then(res => {
          this.treeData = util.getTree(res)
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {})
    },
    // 分页操作
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    // 充值列表分页操作
    paginationRechargeCurrentChange (currentPage) {
      this.paginationRecharge.currentPage = currentPage
      this.getRechargePage()
    },
    onAreaChange (data, node) {
      this.queryForm.areaId = data.id
      this.queryForm.areaName = data.name
      this.fetchData()
    },
    // 获取户号对应账单
    getHouseHoldBillPage (id) {
      this.householdId = id
      this.$api
        .admin_bill_getHouseHoldBillPage({
          householdId: id,
          pageNum: this.paginationRightBottom.currentPage,
          pageSize: this.paginationRightBottom.pageSize
        })
        .then(res => {
          this.dataRightBottom = res.data
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    fetchData () {
      this.loading = true
      this.dataRightBottom = []
      const areaId = this.queryForm.areaId.pop()
      this.$api
        .admin_customerFee_getPageList({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          areaId: areaId || '',
          customerSerialnumber:
              this.queryForm.type == 2 ? this.queryForm.searchVal : '',
          customerName:
              this.queryForm.type == 3 ? this.queryForm.searchVal : '',
          customerPhone:
              this.queryForm.type == 4 ? this.queryForm.searchVal : '',
          customerCertificateNumber:
              this.queryForm.type == 5 ? this.queryForm.searchVal : ''
        })
        .then(res => {
          this.data = res.data
          this.pagination.total = res.total
          if (res.data.length > 0) {
            this.getCustomerFeeData(res.data[0].id)
          }
        })
        .catch(err => {
          console.log('err', err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.paginationRightBottom.currentPage = 1
      this.fetchData()
    }
  }
}
</script>
<style lang="scss" scoped >
  .btnBox {
    display: flex;
    justify-content: center;
  }
</style>
<style>
  .cursorTable tr{
    cursor: pointer;
  }
</style>
